html,
body {
  width: 100%;
  height: 100%;
}
body {
  background-image: url("../images/bg.jpg");
  color: #fff;
  font-size: 0.666667rem;
}
/* 整体布局 */
.layout {
  min-width: 42.67rem;
  max-width: 80rem;
  min-height: 32.5rem;

  margin: 0 auto;
  background-image: url("../images/logo.png");
  background-repeat: no-repeat;
  background-size: contain;
  padding: 3.666667rem 0.833333rem 0;
  display: flex;
  overflow: hidden;
}
.cloumn {
  flex: 1.1;
  overflow: hidden;
  /* height: 400px; */
  /* background-color: #f00; */
}
.cloumn:nth-child(2) {
  flex: 2;
  margin: 1.333333rem 0.833333rem 0;
}

.borderimage {
  border: 1px solid;
  border-image-source: url("../images/border.png");
  /* 上  右  下  左 */
  /* 上   左右   下 */
  /* 上下   左右 */
  /* 四周一样 */
  border-image-slice: 55 42 26 138;
  border-image-width: 2.291667rem 1.75rem 1.083333rem 5.75rem;
  /* padding: 0.416667rem; */
  box-sizing: border-box;
  margin-bottom: 0.42rem;
}
.icon-dot {
}
.title {
  height: 1.88rem;
  line-height: 1.88rem;
  background-image: linear-gradient(to right, #2743ce, #002773, #030b646c);
  padding-left: 0.83rem;
  z-index: 99;
}
/* 左侧 */
/* 市区设备运行情况 */
.townBaseinfo {
  height: 40.67rem;
}
.townBaseinfo .content {
  /* display: flex; */
  /* align-items: center; */
  padding: 0.42rem 0.83rem;
}
.townBaseinfo .content li {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}
.townBaseinfo .content li:first-child {
  font-size: 0.83rem;
}
.townBaseinfo .content > li div:first-child {
  width: 26%;
}
.townBaseinfo .content > li div:nth-of-type(n + 2) {
  width: 24%;
  text-align: center;
}
.townBaseinfo .content > li:nth-of-type(n + 2) div:nth-of-type(n + 2) {
  font-size: 1.08rem;
  color: #00a8ff;
}
/* 二级 左边第一个盒子 镇设备运行情况 */
.lFirstBox {
  height: 10.83rem;
}

.lFirstBox ul {
  padding: 0.42rem 1rem;
}

.lFirstBox li {
  display: flex;
  align-items: center;
  margin-bottom: 0.42rem;
  font-size: 0.5rem;
  opacity: 0.8;
}

.lFirstBox li > div {
  display: flex;
  align-items: center;
  width: 36%;
}

.lFirstBox li > div:first-child {
  width: 22%;
  font-size: 1rem;
  color: #00dc50;
  margin-right: 0.58rem;
}
.lFirstBox li > div:nth-child(2) {
}
.lFirstBox li > div:nth-child(3) {
  margin-left: 0.42rem;
}
.lFirstBox li:nth-child(2) > div:first-child {
  color: #fea500;
}

.lFirstBox li:nth-child(3) > div:first-child {
  color: rgb(223, 20, 223);
}
.lFirstBox li span {
  color: #3bdbfe;
  font-size: 1.67rem;
  margin-left: 0.21rem;
}
/* 二级 左边第二个盒子 设备详情 */
.lSecondBox {
  height: 15.42rem;
}
.lSecondBox .faultInfo .content {
  padding: 0.42rem 1.08rem;
}
.lSecondBox .faultInfo .content > p {
  margin-bottom: 0.17rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.lSecondBox .faultInfo .content > p > span {
  color: #00a8ff;
}

/* 二级 左边第三个盒子 设备故障统计 */
.lthirdlyBox {
  height: 13.58rem;
}
.lthirdlyBox .faultStat .content {
  padding: 0.67rem 1.08rem;
  font-size: 1.5rem;
}
.lthirdlyBox .faultStat .content .data,
.lthirdlyBox .faultStat .content .state {
  display: flex;
}
.lthirdlyBox .faultStat .content .data .bigBox > div > :last-child {
  color: #00a8ff;
}
.lthirdlyBox .faultStat .content .data .center {
  color: #fe0000;
}
.lthirdlyBox .faultStat .content .data .right {
  color: #00ff4c;
}
.lthirdlyBox .faultStat .content .left,
.lthirdlyBox .faultStat .content .center,
.lthirdlyBox .faultStat .content .right {
  flex: 1.5;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lthirdlyBox .faultStat .content .left .bigBox {
  margin-bottom: 0.42rem;
}
.lthirdlyBox .faultStat .content .left .bigBox > div {
  display: flex;
  align-items: center;
}
.lthirdlyBox .faultStat .content .left .bigBox > div > div:first-child {
  margin-right: 0.83rem;
  font-size: 0.5rem;
}
.lthirdlyBox .faultStat .content .left .first {
  margin-right: 0.83rem;
}
.lthirdlyBox .faultStat .content .left .first div {
  margin-bottom: 0.75rem;
}
.lthirdlyBox .faultStat .content .center {
  flex: 1;
}
.lthirdlyBox .faultStat .content .right {
  flex: 1;
}
.lthirdlyBox .faultStat .content .left .bgcColor,
.lthirdlyBox .faultStat .content .center .bgcColor,
.lthirdlyBox .faultStat .content .right .bgcColor {
  width: 100%;
  height: 0.92rem;
  margin-bottom: 0.33rem;
  background-color: #00a8ff;
}
.lthirdlyBox .faultStat .content .center .bgcColor {
  background-color: #fe0000;
}
.lthirdlyBox .faultStat .content .right .bgcColor {
  background-color: #00ff4c;
}

.lthirdlyBox .faultStat .left .box {
  display: flex;
}

/* ----------- */

/* 中间 */
.cenTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.67rem;
  margin-top: 0.83rem;
  color: #f2f3f7;
}
.cenTitle span {
  font-size: 1.67rem;
  margin-top: 2.08rem;
  color: #f2f3f7;
  margin: 0 1.67rem;
}
.cenTitle div {
  width: 3.75rem;
  height: 0.13rem;
  background-image: linear-gradient(to right, #47defd, #406eb2ce, #030b646c);
}
.cenTitle div:last-child {
  background-image: linear-gradient(to right, #030b646c, #406eb2ce, #47defd);
}
.cen > ul {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 0.83rem;
}
.cen > ul li {
  display: flex;
  align-items: center;
}
.cen > ul li span {
  font-size: 2.29rem;
  color: #3bdbfe;
  margin-left: 0.42rem;
}
.cen #firstBox {
  height: 32.33rem;
  width: 100%;
  background-color: #0e358998;
}
.cen > #secondBox {
  width: 100%;
  height: 32.33rem;
  position: relative;
}

/* 中间第三层 */
.cen #thirdlyBox {
  position: relative;
  height: 32.33rem;
  width: 100%;
  background-color: #0e358998;
}
.cen #thirdlyBox #three_map {
  position: relative;
  /* background-image: url(../images/map.jpg); */
}
/* .cen #thirdlyBox #three_map .map_tap {
  position: absolute;
  width: 0.83rem;
  height: 2.08rem;
  top: 57%;
  left: 57%;
  background-color: red;
} */
.cen #thirdlyBox #three_map .mask {
  background: #000;
  opacity: 0.5;
}
/* 分布图 */
/* .cen .streetMap {
  width: 100%;
  height: 32.33rem;
} */

/* 右侧 */

/* 报警信息 */
.alarmInfo {
  height: 15rem;
}

.alarmInfo .list {
  height: 13.38rem;
  overflow: hidden;
  width: 100%;
  /* animation-name:指定动画的名称
    animation-duration:动画的完成时间，以秒为做单位 ，如果没有设置则默认为0，动画不会有效果
    animation-interation-count:动画的执行的次数，默认为1，如果需要无限循环，设置为infinite
    animation-delay:动画的延迟，默认为0
    animation-timing-function:动画的速度曲线，如 linear:匀速
    animation-direction:动画方向，如果设置来回：alternate
    animation-play-state:动画播放的状态，play  paused
    */
  /* animation: move 1000s linear infinite; */
  padding: 0.42rem;
  padding-right: 0.83rem;
  padding-left: 0;
  position: relative !important;
}

/* 创建一个动画 */
@keyframes move {
  from {
  }
  to {
    /* 往上移动50% */
    transform: translateY(-50%);
  }
}
/* 鼠标上移，停止动画 */
.alarmInfo .list:hover {
  animation-play-state: paused;
}

.alarmInfo .list li {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 0.58rem;
  opacity: 0.8;
  margin-bottom: 0.67rem;
  padding-left: 0.67rem;
}

.alarmInfo .list li > .num {
  display: flex;
  align-items: center;
  margin-right: 0.63rem;
}

.alarmInfo .list li .lastDiv > div:first-child {
  margin-bottom: 0.21rem;
}

.alarmInfo .list li .lastDiv > div:nth-child(2) {
  margin-bottom: 0.21rem;
}
.alarmInfo .list li .lastDiv > div:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.alarmInfo .icon-dot {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  opacity: 0;
}
.alarmInfo li:hover .icon-dot {
  opacity: 1;
  color: #3bdbfe;
}
.alarmInfo li:hover {
  color: #3bdbfe;
}
/* 点击弹出的信息 */

/* 视频监控 */
.rSecondBox {
  height: 15rem;
}
.rSecondBox #monitoringCoun {
}
.rSecondBox #monitoringCount .content {
  margin-top: 5rem;
  font-size: 1.25rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.rSecondBox #monitoringCount .content > div {
  display: flex;
  align-items: center;
}
.rSecondBox #monitoringCount .content > div > span {
  margin-left: 1.25rem;
  font-size: 2.08rem;
}
.rSecondBox #monitoringCount .content > div:first-child > span {
  color: #00dc50;
}
.rSecondBox #monitoringCount .content > div:last-child > span {
  color: red;
}
.monitoring {
  height: 100%;
}
.monitoring .content {
  height: 13.13rem;
}
/* 预警统计 */
.preWarningSystem {
  margin-top: 0.42rem;
  height: 11.13rem;
  border: 1px solid;
  border-image-source: url("../images/border.png");
  /* 上  右  下  左 */
  /* 上   左右   下 */
  /* 上下   左右 */
  /* 四周一样 */
  border-image-slice: 55 42 26 138;
  border-image-width: 2.291667rem 1.75rem 1.083333rem 5.75rem;
  /* padding: 0.416667rem; */
  box-sizing: border-box;
  margin-bottom: 0.42rem;
}
.preWarningSystem .content {
  height: 11.13rem;
}
.preWarningSystem .content #answerPicturess {
  height: 60%;
  margin-bottom: 0.83rem;
}
.preWarningSystem .content .answerBoxss {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 1rem;
  line-height: 1.25rem;
  padding: 0 1.67rem;
}

/* 充电占比 */
.rechargeAnswer {
  height: 100%;
}

.rechargeAnswer .content {
  height: 12.13rem;
}

.rechargeAnswer .content #answerPicture {
  height: 70%;
  margin-bottom: 0.83rem;
}

.rechargeAnswer .content .answerBox {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 1rem;
  line-height: 1.25rem;
  padding: 0 1.67rem;
}
.rechargeAnswer .content .answerBox > div {
  text-align: center;
  height: 100%;
  background-color: #00dc50;
  color: #00dc50;
  white-space: nowrap;
}

.rechargeAnswer .content .answerBox > div:nth-child(2) {
  background-color: #e91a46;
  color: #e91a46;
}
.rechargeAnswer .content .answerBox > div:nth-child(1) {
}
.rechargeAnswer .content .answerBox > div:nth-child(1) > span {
  position: absolute;
  top: -1.33rem;
  left: 0;
}
.rechargeAnswer .content .answerBox > div:nth-child(3) > span {
  position: absolute;
  top: -1.33rem;
  right: 0;
}
.rechargeAnswer .content .answerBox > div:nth-child(3) {
  background-color: #40a2e5;
  color: #40a2e5;
}
.rechargeAnswer .content .answerBox > div > div:first-child {
  width: 100%;
  height: 100%;
  margin-bottom: 0.25rem;
}
